<template>
  <div class="page">
    <data-box ref="databox" :params="params" @resetForm="resetPhone" :server="servers.getCaseAllocatPageList" row-key="cupoBatch" showExpend>
      <!--输入区域-->
      <template slot="mustShowInput">
        <el-form-item label="客户姓名" v-role="0x040306" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum" :rules="[validate.truePhoneRules()]" v-role="0x040314">
          <el-input v-model="params.phoneNumX" @change="PhoneFormat" :maxlength="13"></el-input>
        </el-form-item>
      </template>
      <template slot="input">
        <el-form-item label="申请省份" v-role="0x040304" prop="province">
          <el-select v-model="params.province" placeholder="请选择" clearable>
            <el-option v-for="{id,areaName} in provinceList" :key="id" :label="areaName" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请城市" v-role="0x040305" prop="city">
          <el-select v-model="params.city" placeholder="请选择" clearable>
            <el-option v-for="{id,areaName} in cityList" :key="id" :label="areaName" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" v-role="0x040302" prop="batchNumber">
          <el-input v-model="params.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="还款状态" v-role="0x040307" prop="cupoPaystatus">
          <el-select v-model="params.cupoPaystatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0033')" :key="id" :label="name" :value="name">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="逾期天数" v-role="0x040308" prop="overDueDays1" :rules="[
            { validator: validate.validateMin(params.overDueDays2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueDays1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040308" prop="overDueDays2" :rules="[
            { validator: validate.validateMax(params.overDueDays1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueDays2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="案件金额" v-role="0x040309" prop="overDueAmount1" :rules="[
            { validator: validate.validateMin(params.overDueAmount2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueAmount1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040309" prop="overDueAmount2" :rules="[
            { validator: validate.validateMax(params.overDueAmount1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDueAmount2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="案件手数" v-role="0x040310" prop="caseHandnum1" :rules="[
            { validator: validate.validateMin(params.caseHandnum2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.caseHandnum1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040310" prop="caseHandnum2" :rules="[
            { validator: validate.validateMax(params.caseHandnum1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.caseHandnum2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="委托方" v-role="0x040303" prop="prinCode">
          <el-select v-model="params.prinCode" placeholder="请选择" clearable>
            <el-option v-for="{index,prinId,prinName} in dataName" :key="index" :label="prinName" :value="prinId">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="佣金比例%" v-role="0x040311" prop="commissionRat1" :rules="[
            { validator: validate.validateMin(params.commissionRat2), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.commissionRat1" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x040311" prop="commissionRat2" :rules="[
            { validator: validate.validateMax(params.commissionRat1), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.commissionRat2" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="委案日期" v-role="0x040312" prop="caseDate1">
            <el-date-picker v-model="params.caseDate1" type="date" placeholder="选择日期" :picker-options="caseDate1" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="-" v-role="0x040312" prop="caseDate2">
            <el-date-picker v-model="params.caseDate2" type="date" placeholder="选择日期" :picker-options="caseDate2" :editable="false">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="结案日期" v-role="0x040313" prop="endDate1">
            <el-date-picker v-model="params.endDate1" type="date" placeholder="选择日期" :picker-options="endDate1" :editable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="-" v-role="0x040313" prop="endDate2">
            <el-date-picker v-model="params.endDate2" type="date" placeholder="选择日期" :picker-options="endDate2" :editable="false">
            </el-date-picker>
          </el-form-item>
        </div>
      </template>
      <template slot="button">
        <!--按钮区域-->
        <el-button @click="reAllocatClick" v-role="0x040301">批量分配</el-button>
      </template>
      <template slot="column">
        <!--数据列区域-->
        <el-table-column type="selection" width="40">
        </el-table-column>
        <el-table-column type="index" label="序号" width="40">
        </el-table-column>
        <el-table-column prop="caseCode" label="案件编号" min-width="100">
          <template scope="scope">
            <el-button type="text" size="small" @click="casedetailsClick(scope)">{{scope.row.caseCode}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="批次号" min-width="90">
        </el-table-column>
        <el-table-column prop="prinName" label="委托方" min-width="90">
        </el-table-column>
        <el-table-column prop="city" label="申请城市" min-width="60">
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名" min-width="90">
        </el-table-column>
        <el-table-column prop="phoneNum" label="手机号" min-width="90">
          <template scope="scope">
            <span>{{scope.row.phoneNum | encryptPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payStatus" label="还款状态" min-width="80">
        </el-table-column>
        <el-table-column prop="overDueDays" label="逾期天数" min-width="80">
        </el-table-column>
        <el-table-column prop="overDueAmount" label="案件金额(元)" min-width="100">
        </el-table-column>
        <el-table-column prop="caseHandnum" label="案件手数" min-width="60">
        </el-table-column>
        <el-table-column prop="commissionRate" label="佣金比例(%)" min-width="80">
        </el-table-column>
        <el-table-column prop="caseDate" label="委案日期" min-width="90">
        </el-table-column>
        <el-table-column prop="endDate" label="结案日期" min-width="90">
        </el-table-column>
      </template>
    </data-box>
    <!--弹出框-->
    <el-dialog title="选择催收机构或催收员" v-model="accUserDialogsVisual" class="dialog-middle" @close="chooseClose" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <allot-include-tree @close="accUserDialogsVisual=false" @org="orgflag=true" @user="userflag=true" ref="allotTree"></allot-include-tree>
    </el-dialog>
    <!--案件详情-->
    <el-dialog title="案件详情" v-model="caseDetailsFlag" size="full" @open="detailsOpen" :modal="false">
      <details-tab :tabsArr="tabsArr" ref="tab">
        <template slot="custInform">
          <cust-inform ref="custInform"></cust-inform>
        </template>
        <template slot="payInform">
          <pay-inform ref="payInform"></pay-inform>
        </template>
        <template slot="attachInform">
          <attach-inform ref="attachInform"></attach-inform>
        </template>
      </details-tab>
    </el-dialog>
    <!--org-->
    <el-dialog title="案件分配" v-model="orgflag" @open="orgOpen" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <organization-allocate @caseList="caseList" @caseNumList="caseNumList" @organizationInfo="organizationInfo" ref="organizationAllocate" @openconfirmAllocate="confirmAllocate=true" @close="orgflag=false" @orgPreStep="accUserDialogsVisual = true" @refresh="$refs['databox'].refresh()"></organization-allocate>
    </el-dialog>
    <el-dialog title="确认分配" @open="getorgData" v-model="confirmAllocate" size="small" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <organization-confirm ref="orgConfirm" @close="confirmAllocate=false;orgflag=false" :caseDataId="caseDataId" :caseDataNum="caseDataNum" @refresh="$refs['databox'].refresh()"></organization-confirm>
    </el-dialog>
    <!--user-->
    <el-dialog title="案件分配" v-model="userflag" @open="userOpen" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <user-allocate ref="userAllocate" @userNameList="userNameList" @caseList="caseList" @caseNumList="caseNumList" @organizationInfo="organizationInfo" @openconfirmuser="Confirmuser=true" @close="userflag=false" @userPreStep="accUserDialogsVisual = true" @refresh="$refs['databox'].refresh()"></user-allocate>
    </el-dialog>
    <el-dialog title="确认分配" @open="getuserData" v-model="Confirmuser" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <user-confirm ref="usercon" @close="Confirmuser=false;userflag=false" :caseDataId="caseDataId" :caseDataNum="caseDataNum" :UserNameData="UserNameData" @refresh="$refs['databox'].refresh()"></user-confirm>
    </el-dialog>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import server from '@/config/servers'
  import AllotIncludeTree from '@/views/case-manage/AllotIncludeTree'
  import net from '@/util/net'
  import { getCityJson, validateMin, validateMax, truePhoneRules, mobileFormatting } from '@/util/common'
  // 案件详情
  import DetailsTab from '@/components/DetailsTab'
  import CustInform from '@/views/case-manage/CustInform'
  import PayInform from '@/views/case-manage/PayInform'
  import AttachInform from '@/views/case-manage/AttachInform'
  // 催收员分配
  import UserAllocate from '@/views/case-manage/UserAllocate'
  // 机构分配
  import OrganizationAllocate from '@/views/case-manage/OrganizationAllocate'
  import OrganizationConfirm from '@/views/case-manage/OrganizationConfirm'
  import UserConfirm from '@/views/case-manage/UserConfirm'

  export default {
    name: 'case-allocate',
    data() {
      return {
        servers: {
          getCaseAllocatPageList: server.CaseManage.get_case_allocat_page_list
        },
        params: {
          batchNumber: '',
          prinCode: '',
          province: '',
          city: '',
          custName: '',
          cupoPaystatus: '',
          overDueDays1: '',
          overDueDays2: '',
          overDueAmount1: '',
          overDueAmount2: '',
          caseHandnum1: '',
          caseHandnum2: '',
          commissionRat1: '',
          commissionRat2: '',
          caseDate1: '',
          caseDate2: '',
          endDate1: '',
          endDate2: '',
          phoneNum: '',
          phoneNumX: '',
          sort: 'caseCode,asc'
        },
        validate: {
          validateMin,
          validateMax,
          truePhoneRules
        },
        multipleSelection: [],
        provinceList: getCityJson({ level: 1 }), // 省份列表
        accUserDialogsVisual: false,
        confirmAllocate: false,
        Confirmuser: false,
        dataName: [],
        // 案件详情
        tabsArr: [{
          title: '客户信息',
          pane: 'custInform'
        }, {
          title: '还款信息',
          pane: 'payInform'
        }, {
          title: '附件信息',
          pane: 'attachInform'
        }],
        caseDetail: {
          cust: {
            type: '',
            prinCode: '',
            idCardNumber: ''
          },
          pay: {
            type: '',
            cupoOrdernum: '',
            productId: '',
            orderNum: ''
          },
          orgData: [],
          attach: {
            type: '',
            cupoCasenum: '',
            custId: ''
          }
        },
        caseDetailsFlag: false,
        // 用户
        userflag: false,
        // 机构
        orgflag: false,
        caseDataId: [],
        caseDataNum: [],
        UserNameData: [],
        /**
         * 获取委案日期
         */
        caseDate1: {
          disabledDate: (time) => {
            let endTime = this.params.caseDate2
            if (endTime) {
              return time.getTime() > endTime.getTime()
            }
          }
        },
        caseDate2: {
          disabledDate: (time) => {
            let startTime = this.params.caseDate1
            if (startTime) {
              return time.getTime() < startTime.getTime()
            }
          }
        },
        /**
         * 获取结案日期
         */
        endDate1: {
          disabledDate: (time) => {
            let endTime = this.params.endDate2
            if (endTime) {
              return time.getTime() > endTime.getTime()
            }
          }
        },
        endDate2: {
          disabledDate: (time) => {
            let startTime = this.params.endDate1
            if (startTime) {
              return time.getTime() < startTime.getTime()
            }
          }
        }
      }
    },
    computed: {
      /**
       * 获取2级城市列表
       */
      cityList() {
        return this.params.province ? getCityJson({ level: 1, parentId: this.params.province }) : []
      }
    },
    mounted() {
      net.send({
        server: server.ApprovalManage.get_all_pricipal,
        data: this.$route.path
      }).then((data) => {
        // 接口返回的数据
        this.dataName = data
      })
    },
    deactivated() {
      // 离开本页面案件详情关闭
      this.caseDetailsFlag = false
    },
    methods: {
      organizationInfo(data) {
        this.orgData = data
      },
      caseList(caseIdList) {
        this.caseDataId = caseIdList
        console.log(this.caseDataId, 777)
      },
      caseNumList(caseNumList) {
        this.caseDataNum = caseNumList
      },
      userNameList(userNameList) {
        this.UserNameData = userNameList
      },
      /**
       * 手机号重置
       */
      resetPhone() {
        this.params.phoneNumX = ''
      },
      /**
       * 手机号格式设置(xxx-xxxx-xxxx)
       */
      PhoneFormat() {
        // 输入框输入手机格式(xxx-xxxx-xxxx)
        this.params.phoneNumX = mobileFormatting(this.params.phoneNumX.replace(/-/g, ''))
        // 取消'-'格式
        this.params.phoneNum = this.params.phoneNumX.replace(/-/g, '')
      },
      /**
       * 选择Close
       */
      chooseClose() {
        this.$refs['allotTree'].refresh()
      },
      getorgData() {
        this.$nextTick(() => {
          this.$refs['orgConfirm'].refresh(this.orgData)
        })
      },
      getuserData() {
        this.$nextTick(() => {
          this.$refs['usercon'].refresh(this.orgData)
        })
      },
      /**
       * 机构分配Open
       */
      orgOpen() {
        this.$nextTick(() => {
          this.$refs['organizationAllocate'].refresh(this.multipleSelection)
        })
      },
      /**
       * 用户分配Open
       */
      userOpen() {
        this.$nextTick(() => {
          this.$refs['userAllocate'].refresh(this.multipleSelection)
        })
      },
      /**
       * 批量分配
       */
      reAllocatClick() {
        this.multipleSelection = this.$refs['databox'].getCurrentSelection()
        if (this.multipleSelection.length === 0) {
          this.$alert('请选择要分配的案件', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.accUserDialogsVisual = true
        }
      },
      /**
       * 案件详情
       */
      casedetailsClick(scope) {
        this.caseDetail.attach.custId = scope.row.custId
        this.caseDetail.attach.orderNum = scope.row.orderNum
        this.caseDetail.cust.custId = scope.row.custId
        this.caseDetail.cust.idCardNumber = scope.row.idCardNumber
        this.caseDetail.pay.productId = scope.row.productId
        this.caseDetail.pay.cupoOrdernum = scope.row.orderNum
        this.caseDetail.pay.orderNum = scope.row.orderNum

        this.caseDetailsFlag = true
      },
      /**
       * 案件详情open事件
       */
      detailsOpen() {
        this.$nextTick(() => {
          this.$refs['payInform'].refresh(this.caseDetail.pay)
          this.$refs['attachInform'].refresh(this.caseDetail.attach)
          this.$refs['custInform'].refresh(this.caseDetail.cust)
        })
      }
    },
    activated() {
      this.$refs['databox'].refresh()
    },
    components: {
      DataBox,
      AllotIncludeTree,
      // 案件详情
      DetailsTab,
      CustInform,
      PayInform,
      AttachInform,
      // 催收员分配
      UserAllocate,
      // 机构分配
      OrganizationAllocate,
      OrganizationConfirm,
      UserConfirm
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
